<template>
  <div class="song">
    <div class="song-top">
        <h3>最新音乐</h3>
    </div>
    <!-- 歌单列表单独提取出来封装成一个组件 -->
    <SongItemVue :songs="songs"></SongItemVue>
  </div>
</template>
<script>
import SongItemVue from '../SongItem.vue'
export default {
  name: 'SongList',
  props:{
      songs:{
          type:Array,
          default:()=>[],
          required:true
      }
  },
  components:{
      SongItemVue
  }
}
</script>
<style scoped lang="scss">
@import '../../assets/css/variable.scss';
@import '../../assets/css/mixin.scss';
.song{
    width: 100%;
    @include bg_sub_color();
    .song-top{
        width: 100%;
        height: 84px;
        line-height: 84px;
        @include bg_sub_color();
        border-bottom: 1px solid #ccc;
        padding: 0 20px;
        h3{
            @include font_size($font_large);
            font-weight:bold;
            @include font-color()
        }
    }
}
</style>
